<template>
  <div id="sys5List">
    <el-card shadow="hover" class="box-card">
      <div slot="header" class="clearfix">
        <span>字典分类</span>
        <el-button style="float:right" size="mini" icon="el-icon-plus">
          新增字典分类
        </el-button>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          size="mini"
          style="width:200px;float:right;margin-right:20px"
          v-model="txtsearch"
          clearable
        >
        </el-input>
      </div>
      <el-collapse accordion @change="OnExpand">
        <transition-group name="breadcrumb">
          <el-collapse-item
            v-for="item in tableData"
            :key="item.System_5_10"
            :name="item.System_5_20"
          >
            <template slot="title">
              <el-row style="width:100%">
                <el-col :span="5">
                  字典类别编号: <el-tag>{{ item.System_5_20 }}</el-tag>
                </el-col>
                <el-col :span="6">
                  名称: <el-tag>{{ item.System_5_30 }}</el-tag>
                </el-col>
                <el-col :span="3">
                  是否显示:
                  <el-tag>{{ item.System_5_60 == "1" ? "是" : "否" }}</el-tag>
                </el-col>
                <el-col :span="10">
                  <el-button
                    size="mini"
                    @click.stop
                    icon="el-icon-edit"
                    @click="sys5edit(item)"
                    >编辑</el-button
                  >
                  <el-button size="mini" @click.stop icon="el-icon-delete"
                    >删除</el-button
                  >
                  <el-button
                    v-btnper="'sys4Gridnew'"
                    size="mini"
                    @click.stop
                    icon="el-icon-plus"
                    >新增字典</el-button
                  >
                </el-col>
              </el-row>
            </template>
            <el-table
              v-loading="loading"
              border
              :data="sys4Data"
              stripe
              style="width: 100%"
              row-key="System_5_10"
              ref="table"
            >
              <el-table-column type="index" width="40"> </el-table-column>
              <el-table-column prop="System_4_20" label="字典编号">
              </el-table-column>
              <el-table-column prop="System_4_30" label="字典类别编号">
              </el-table-column>
              <el-table-column prop="System_4_40" label="中文名称">
              </el-table-column>
              <el-table-column prop="System_4_50" label="值1">
              </el-table-column>
              <el-table-column prop="System_4_60" label="值2">
              </el-table-column>
              <el-table-column prop="System_4_80" label="顺序号">
              </el-table-column>
              <el-table-column prop="System_4_90" label="备用">
              </el-table-column>
              <el-table-column prop="System_4_100" label="备用">
              </el-table-column>
              <el-table-column prop="System_4_110" label="备用">
              </el-table-column>
              <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-edit"
                    @click="sys4edit(scope.row)"
                    >编辑</el-button
                  >
                  <el-button size="mini" icon="el-icon-delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </transition-group>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
import { System5, System4 } from "@/api";
import sys5Edit from "./sys5Edit";
import sys4Edit from "./sys4Edit";
export default {
  data() {
    return {
      tableData: [],
      sys4Data: [],
      txtsearch: "",
      loading: true
    };
  },
  //外部属性
  props: {},
  //内部方法
  methods: {
    //初始化
    async initPage() {
      let sys5data = await System5.get(this.txtsearch);
      this.tableData = sys5data;
    },
    //展开
    async OnExpand(System_5_20) {
      this.loading = true;
      let sys4data = await System4.get(System_5_20);
      this.sys4Data = sys4data;
      this.$nextTick(() => {
        this.loading = false;
      });
    },
    //打开页面
    sys5edit(item) {
      this.getsys5edit().show({ form: { ...item } });
    },
    //打开页面
    sys4edit(item) {
      this.getsys4edit().show({ form: { ...item } });
    },
    //打开字典分类编辑
    getsys5edit() {
      let edit = this.$window(sys5Edit, "编辑字典分类");
      edit.$on("onSys5Save", (res, data) => {
        res.MsRbool && this.initPage();
      });
      return edit;
    },
    //打开字典编辑
    getsys4edit() {
      let edit = this.$window(sys4Edit, "编辑字典");
      edit.$on("onSys4Save", (res, data) => {
        res.MsRbool && this.OnExpand(data.System_4_30);
      });
      return edit;
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  async mounted() {
    await this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {
    txtsearch() {
      this.initPage();
    }
  }
};
</script>

<style></style>
